<template>
<view class="image-library">
	<view v-if="custom" class="pt" @click="showFile">
		<slot></slot>	
	</view>	
	<view class="image-library-input" v-if="!custom">
		<el-input v-model="input_src" @blur="inputChange" placeholder="请选择文件" v-if="!multiple">
		    <template #append>
				<el-button @click="showFile">选择文件</el-button>
			</template>
		</el-input>
		<el-input disabled v-else>
		    <template #append>
				<el-button @click="showFile">选择文件</el-button>
			</template>
		</el-input>
		<view class="select-img" v-if="valueImg.length >0">
			<view class="select-img-li" 
				v-for="(item,index) in valueImg" 
				:key="index" 
			>
				<view class="delete-mask" v-if="multiple" @click="deleteValueImg(index)">
					<i class="ri-delete-bin-2-line"></i>
				</view>	
				<image class="img" :src="item" mode="aspectFit"></image>
			</view>
		</view>	
	</view>	
	
	<el-dialog title="选择文件" v-model="show" width="820px" :append-to-body="true">
		<view class="opera-btn">
			<el-checkbox label="全选" size="large" />
			<el-button type="danger" class="ml12" @click="deteleImg">
				<i class="ri-delete-bin-2-line"></i>删除
			</el-button>
			<el-button type="primary" @click="chooseImg" :loading="uploading">
				<i class="ri-upload-cloud-2-line"></i>图片上传
			</el-button>
		</view>	
		<view class="images-item mt6">
			<view class="images-item-li" 
				v-for="(item,index) in list" 
				:key="index" 
				@click="selectImg(item.url)"
			>
				<view class="img-mask" v-if="checkedImg.includes(item.url)">
					<img src="/static/checked.png" alt="">
				</view>
				<el-image class="img" :src="item.url" fit="cover" />
			</view>	
			<view style="width: 90px;height: 1px;" v-for="item in 7" :key='item'></view>	
		</view>	
		<view style="display: flex;justify-content: flex-end;">
			<el-pagination small background 
				v-model="page" 
				layout="prev, pager, next" 
				:total="count" 
				:page-size="32"
				@prev-click="e=>getFileList(e)"
				@next-click="e=>getFileList(e)"
				@current-change="e=>getFileList(e)"
			/>
			<el-button type="primary" @click="sureSelect">确认</el-button>
		</view>
	</el-dialog>
</view>
</template>
<script>
const pkCommon = uniCloud.importObject('pk-common')
import { ElMessage } from 'element-plus'
export default{
	name:'image-library',
	props:{
		multiple:{
			type:Boolean,
			default:false
		},
		src:{
			type:[String,Array]
		},
		custom:{
			type:Boolean,
			default:false
		}
	},
	data(){
		return {
			show:false,
			uploading:false,
			list:[],
			page:1,
			count:0,
			checkedImg:[],
			input_src:'',
			valueImg:[],
		}
	},
	watch:{
		src: {
			immediate: true,
			handler(val) {
				if(!val) {
					this.valueImg = []
					this.input_src = ''
					return 
				}
				if( this.multiple ){
					this.valueImg = val
				}else{
					this.valueImg = [val]
					this.input_src = val
				}
			}
		},
	},
	methods:{
		showFile(){
			this.show  = true
			if( this.list.length == 0 ){
				this.getFileList(1)
			}
		},
		
		async getFileList(page){
			let t = this
			t.page = page
			try{
				let res = await pkCommon.getFile(page,32,{type:1})
				t.list = res.data.list
				t.count = res.data.count
			}catch(e){}
		},
		
		chooseImg(){
			let t = this
			uni.chooseImage({
				count:9,
				success(res) {
					t.addFile(res.tempFilePaths)
				}
			})
		},
		async addFile(files){
			let t = this, imgs = []
			t.uploading = true
			for (var i = 0; i < files.length; i++) {
				let url = await t.$util.uploadFile(files[i])
				imgs.push(url)
			}
			try{
				let res = await pkCommon.addFile(imgs,1)
				ElMessage.success('上传成功')
				t.uploading = false
				t.getFileList(1)
			}catch(e){
				ElMessage.error(e.errMsg)
				t.uploading = false
			}
		},
		
		selectImg(url){
			let t = this
			if( t.checkedImg.includes(url) ){
				t.checkedImg.splice(t.checkedImg.indexOf(url),1)
			}else{
				t.checkedImg.push(url)
			}
		},
		
		async deteleImg(){
			let t = this
			if( t.checkedImg.length == 0 ){
				ElMessage.error('请选择要删除的文件')
				return
			}
			try{
				let res = await pkCommon.deleteFile(t.checkedImg)
				ElMessage.success('删除成功')
				t.getFileList(t.page)
			}catch(e){
				ElMessage.error(e.errMsg)
			}
		},
		
		sureSelect(){
			let t = this
			if( t.checkedImg.length == 0 ){
				ElMessage.error('请选择文件')
				return
			}
			t.show = false
			if( t.multiple ){
				t.valueImg.push(...t.checkedImg)
				t.$emit('success',t.valueImg)
			}else{
				t.valueImg = [t.checkedImg[0]]
				t.input_src = t.checkedImg[0]
				t.$emit('success',t.valueImg[0])
			}
			t.checkedImg = []
		},
		deleteValueImg(index){
			this.valueImg.splice(index,1)
			this.$emit('success',this.valueImg)
		},
		
		inputUrl(){
			this.$emit('success',this.input_src)
		},
		
		inputChange(){
			this.$emit('success',this.input_src)
		}
	}
}
</script>

<style lang="scss" scoped>
.image-library{
	width: 100%;
}
.opera-btn{
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.images-item{
	width: 100%;
	height: 400px;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	justify-content: space-between;
	overflow: hidden;
	overflow-y: auto;
	
	&-li{
		width: 90px;
		height: 90px;
		margin-bottom: 8px;
		cursor: pointer;
		border: 1px solid #f4f4f4;
		position: relative;
		.img-mask{
			position: absolute;
			width: 100%;
			height: 100%;
			background: rgba(#000, .5);
			z-index: 9;
			text-align: center;
			line-height: 110px;
			
			img{
				width: 40px;
				height: 40px;
			}
		}
		.img{
			width: 100%;
			height: 100%;
		}
	}
}

.select-img{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	margin-top: 6px;
	
	&-li{
		width: 80px;
		height: 80px;
		position: relative;
		margin:  0 12px 12px 0;
		.img{
			width: 100%;
			height: 100%;
			border-radius: 4px;
		}
		.delete-mask{
			position: absolute;
			width: 100%;
			height: 100%;
			background: rgba(#000, .5);
			text-align: center;
			line-height: 80px;
			font-size: 20px;
			z-index: 9;
			color: #fff;
			cursor: pointer;
			display: none;
			border-radius: 4px;
		}
		
		&:hover{
			.delete-mask{
				display: block;
			}
		}
	}
	
}

</style>